import { LoginForm, ProFormText } from '@ant-design/pro-components'
import {Helmet, useModel, history} from '@umijs/max';
import React, { useState } from 'react'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import { theme, message} from 'antd'
import { login } from '@/services/ant-design-pro/api';
import { flushSync } from 'react-dom';

const Login: React.FC = () => {
    const { token } = theme.useToken();
    const [userLoginState, setUserLoginState] = useState<API.LoginResult>({});
    const [type, setType] = useState<string>('account');
    const { initialState, setInitialState } = useModel('@@initialState');

    const fetchUserInfo = async () => {
    //   const userInfo = await initialState?.fetchUserInfo?.();
    //   if (userInfo) {
    //     flushSync(() => {
    //       setInitialState((s) => ({
    //         ...s,
    //         currentUser: userInfo,
    //       }));
    //     });
    //   }
    };

    const handleSubmit = async (values: API.LoginParams) => {
        console.log('values',values)
        try {
            // 登录
            const msg = await login({ ...values, type:'account' });
           
            if (msg.status === 'ok') {
                message.success('登录成功！');
                // await fetchUserInfo();
                const urlParams = new URL(window.location.href).searchParams;
                history.push(urlParams.get('redirect') || '/');
                return;
            }
            setUserLoginState(msg);
        } catch (error) {
            message.error('登录失败，请重试！')
        }
    };

    return (
        <div className='container'>
            <Helmet><title>登录-大象机械</title></Helmet>
            <LoginForm
                logo="https://github.githubassets.com/favicons/favicon.png"
                title="Github"
                subTitle="全球最大的代码托管平台"
                onFinish={async (values) => {
                    await handleSubmit(values as API.LoginParams);
                }}
            >
                <>
                    <ProFormText
                        name="username"
                        fieldProps={{
                            size: 'large',
                            prefix: <UserOutlined className={'prefixIcon'} />,
                        }}
                        placeholder={'用户名: admin or user'}
                        rules={[
                            {
                                required: true,
                                message: '请输入用户名!',
                            },
                        ]}
                    />
                    <ProFormText.Password
                        name="password"
                        fieldProps={{
                            size: 'large',
                            prefix: <LockOutlined className={'prefixIcon'} />,
                            strengthText:
                                'Password should contain numbers, letters and special characters, at least 8 characters long.',
                            statusRender: (value) => {
                                const getStatus = () => {
                                    if (value && value.length > 12) {
                                        return 'ok';
                                    }
                                    if (value && value.length > 6) {
                                        return 'pass';
                                    }
                                    return 'poor';
                                };
                                const status = getStatus();
                                if (status === 'pass') {
                                    return (
                                        <div style={{ color: token.colorWarning }}>
                                            强度：中
                                        </div>
                                    );
                                }
                                if (status === 'ok') {
                                    return (
                                        <div style={{ color: token.colorSuccess }}>
                                            强度：强
                                        </div>
                                    );
                                }
                                return (
                                    <div style={{ color: token.colorError }}>强度：弱</div>
                                );
                            },
                        }}
                        placeholder={'密码: ant.design'}
                        rules={[
                            {
                                required: true,
                                message: '请输入密码！',
                            },
                        ]}
                    />
                </>
            </LoginForm>
        </div>
    )
}

export default Login